<template>
  <div id="dispatchList">
    <ul class="select-modal">
      <li
        v-for="(item, index) in modalTitle"
        :key="index"
        :class="{ active: index == ckmodalIndex }"
        @click="selectModal(index)"
      >
        {{ item }}
      </li>
    </ul>
    <div class="select-title">
      <ul class="select-item">
        <li
          v-for="(item, index) in searchTitle"
          :key="index"
          :class="{ active: index == cksearchIndex }"
          @click="selectTitle(index)"
        >
          {{ item }}
        </li>
      </ul>
      <!-- <div class="select-time">
        <span>快捷选择:</span>
        <el-select
          v-model="selectValue"
          clearable
          placeholder="请选择时间段"
          size="small"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-date-picker
          v-model="timeValue"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="small"
        >
        </el-date-picker>
      </div> -->
    </div>
    <div class="echarts" ref="main"></div>
  </div>
</template>

<script>
// 引入echarts
import echarts from "@/echarts/index";
import { getDispatchSum, getPersonSum, getOrderPay } from "@/network/api/data";

export default {
  data() {
    return {
      modalTitle: ["派遣单信息"],
      ckmodalIndex: 0,
      cksearchIndex: 0,
      searchTitle: ["派遣单量数据", "人数数据", "讲解费数据"],
      timeData: [], //x轴时间数据
      chartData: [], //对应echarts数据
      chart: null, //echarts实例
    };
  },
  mounted() {
    this.InitEcharts();
  },
  async created() {
    this.getChartData();
  },
  methods: {
    // 选择不同模块
    selectModal(index) {
      this.ckmodalIndex = index;
    },
    // 选择不同标题
    async selectTitle(index) {
      this.cksearchIndex = index;
      this.getChartData();
    },
    // 获取echarts数据
    async getChartData() {
      let res = null;
      let data = null;
      switch (this.cksearchIndex) {
        case 0:
          res = await getDispatchSum();
          data = res.data.data.countOrderTimeVO;
          break;
        case 1:
          res = await getPersonSum();
          data = res.data.data.countOrderPVO;
          break;
        default:
          res = await getOrderPay();
          data = res.data.data.countOrderPayVO;
          break;
      }
      this.timeData = Object.keys(data).map((item) => {
        switch (item) {
          case "dayOrder":
            item = "日";
            break;
          case "weekOrder":
            item = "周";
            break;
          case "monthOrder":
            item = "月";
            break;

          default:
            item = "年";
            break;
        }
        return item;
      });
      this.chartData = Object.values(data);
      this.updateChart();
    },
    // echarts配置
    InitEcharts() {
      this.chart = echarts.init(this.$refs.main);
    },
    updateChart() {
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.timeData,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "数据",
            type: "bar",
            barWidth: "40%",
            data: this.chartData,
          },
        ],
      };

      option && this.chart.setOption(option);
      window.addEventListener("resize", () => {
        this.chart.resize();
      });
    },
  },
};
</script>

<style scoped lang='scss'>
#dispatchList {
  .select-modal {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    li {
      width: 20%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: white;
      font-size: 14px;
      background-color: #808080;
      margin-right: 20px;
    }
  }
  .select-title {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .select-item {
      display: inline-block;
      width: 300px;
      margin: 20px 0;
      color: #1890ff;
      text-align: center;
      border-radius: 4px;
      li {
        display: inline-block;
        width: 33%;
        padding: 4px 0;
        font-size: 14px;
        border: 1px solid #a4d3ff;
        background-color: white;
        box-sizing: border-box;
      }
      li:nth-of-type(1) {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        border-right: none;
      }
      li:nth-of-type(3) {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        border-left: none;
      }
    }
    .select-time {
      span {
        font-size: 14px;
        margin-right: 10px;
      }
      .el-select {
        margin-right: 10px;
      }
    }
  }
  .echarts {
    width: 100%;
    height: 60vh;
  }
}
.active {
  background-color: #2a82e4 !important;
  color: white !important;
}
</style>